.message-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 5px;
  z-index: 1000;
  opacity: 0; /* 初始透明度为0 */
  visibility: hidden; /* 初始不可见 */
  transition: opacity 0.5s, visibility 0.5s; /* 过渡效果 */
}

.message-popup.visible {
  opacity: 1; /* 可见 */
  visibility: visible; /* 可见 */
}

.message-popup.fading-out {
  animation: fadeOutAndSlideUp 1s ease-out forwards; /* 淡出并滑动动画 */
}

@keyframes fadeOutAndSlideUp {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -100%); /* 滑动到屏幕上方 */
  }
}